<template>
  <div class="box">
    <el-tabs
        v-model="tabsValue"
        type="card"
        class="demo-tabs"
        @tab-remove="removeTab"
        @tab-change="tabChange"
    >

<!--      <el-tab-pane-->
<!--          label="首页"-->
<!--          name="index"-->
<!--      >-->
<!--        <iframe src="https://www.kantboot.com/"-->
<!--                class="iframe"-->
<!--        ></iframe>-->
<!--      </el-tab-pane>-->

      <el-tab-pane
          v-for="item in editableTabs"
          :key="item.id"
          :label="$i18n.zhToGlobal(item.title)"
          :name="item.id"
          closable
      >
        <iframe :src="item.path"
                class="iframe"
        ></iframe>
      </el-tab-pane>

    </el-tabs>
  </div>

</template>
<script>
import {menuStore} from "/src/store/moudules/menuStore.js";

export default {
  data() {
    return {
      tabsValue: '0',
      editableTabs: [],
      menuStore: menuStore()
    }
  },
  mounted() {
    this.initTabsValue();
  },
  methods: {
    /**
     * 初始化tabsValue
     * @returns {string}
     */
    initTabsValue() {
      let tabsValue = localStorage.getItem('ktMain.tabsValue');
      if (tabsValue) {
        this.tabsValue = parseInt(tabsValue);
      } else {
        this.setTabsValue('index');
      }
      if (this.editableTabs.length === 0) {
        this.setTabsValue('index');
      }
    },
    /**
     * 设置tabsValue
     * @param tabsValue
     */
    setTabsValue(tabsValue) {
      this.tabsValue = tabsValue;
      localStorage.setItem('ktMain.tabsValue', tabsValue);
    },
    /**
     * tab切换
     * @param tab
     */
    tabChange(tab) {
      this.setTabsValue(tab)
    },
    removeTab(id) {
      // 如果关闭的是当前激活的tab，激活当前tab的前一个tab，如果前一个没有，则激活后一个
      if (id === this.tabsValue && this.editableTabs.length > 1) {
        let index = this.editableTabs.findIndex(item => item.id === id);
        if (index === 0) {
          this.setTabsValue(this.editableTabs[index + 1].id);
        } else {
          this.setTabsValue(this.editableTabs[index - 1].id);
        }
      }
      if (this.editableTabs.length === 1) {
        this.setTabsValue('index');
      }

      this.menuStore.closeMenu({id: id});

    }
  },
  watch: {
    'menuStore.opened': {
      handler(val) {
        this.editableTabs = val;
      },
      immediate: true
    },
    // 监听menuIdOfLastOpen的变化
    'menuStore.menuCodeOfLastOpen': {
      handler(val) {
        if (val) {
          this.setTabsValue(val);
        }
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 32px 0 32px;
  box-sizing: border-box;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  //color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.iframe {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 10px;
  box-sizing: border-box;
  border: none;
}

</style>
